<template>
  <div class="userTableSide-container">
    <div class="search-container">
      <label class="search-label-config">
        <span class="label-name">用户名:</span>
        <el-input
          v-model="search.username"
          placeholder="请输入用户名"
          clearable
          style="width: 200px; margin-left: 10px; margin-right: 30px;"
        ></el-input>
      </label>
      <label class="search-label-config">
        <span class="label-name">用户角色:</span>
        <el-select class="style-userRole" v-model="search.userRole" placeholder="请选择用户角色">
          <el-option
            v-for="item in roleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </label>
      <el-button class="search-config-button" type="primary" @click="handleSearch">查询</el-button>
      <el-button class="search-config-button"  @click="handleReset">重置</el-button>
    </div>
    <div class="table-container" v-loading="tableLoading">
      <div class="add-button-container">
        <el-button class="search-config-button" type="primary" @click="handleAdd">新增用户</el-button>
      </div>
      <div class="table-content">
        <el-table
          :data="tableData"
          height="calc(100vh - 380px)"
          border
        >
          <el-table-column prop="username" label="用户名" align="center" width="100"/>
          <el-table-column prop="nickname" label="昵称" align="center"/>
          <el-table-column prop="sex" label="性别" align="center"/>
          <el-table-column prop="roleName" label="关联角色" align="center" width="120"/>
          <el-table-column prop="deptName" label="部门" align="center" width="120"/>
          <el-table-column prop="photo" label="手机号" align="center" width="120"/>
          <el-table-column prop="status" label="用户状态" align="center">
            <template #default="scope">
              <el-switch
                :class="{'check-switch-right': scope.row.status, 'check-switch-left': !scope.row.status,}"
                class="switch-button"
                active-text="启用" inactive-text="禁用"
                v-model="scope.row.status" @change="changeStatus(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column
            prop="describe"
            :show-overflow-tooltip="true"
            width="180"
            label="用户描述"
            align="center"
          />
          <el-table-column prop="createTime" label="创建时间" align="center" width="180"/>
          <el-table-column prop="operator" label="操作" width="120px" align="center" fixed="right">
            <template #default="scope">
              <el-button class="table-edit-button" type="primary" size="small" icon="Edit" @click="editHandler(scope.row,scope.$index)">
                编辑
              </el-button>
              <el-button class="table-edit-button" @click="deleteHandler(scope.row,scope.$index)" type="danger" size="small" icon="Delete">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          :current-page="page.currentPage"
          :page-size="page.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <userDialog
      :dialogVisible.sync="dialogVisible"
      :userTitle="userTitle"
      :userInfo="userInfo"
      :deptName="deptName"
      @closeDialog="closeDialog"
    />
  </div>
</template>

<script>
import {userData} from '@/mock/jsModule/system'
import userDialog from '@/views/system/user/components/userDialog'
export default {
  name: 'userTableSide',
  components:{
    userDialog,
  },
  props:{
    deptName:{
      type: String,
      default: '总部-研发部',
    },
  },
  watch:{
    deptName:{
      deep: true,
      handler(val){
        this.tableLoading = true
        this.init()
        setTimeout(() =>{
          this.tableLoading = false
        },1000)
      }
    },
  },
  data(){
    return{
      search:{
        username: '',
        userRole: '',
      },
      tableData: [],
      roleOptions: [
        {value: 'surAdmin', label: '超级管理员'},
        {value: 'admin', label: '管理员'},
        {value: 'user', label: '普通用户'},
      ],
      tableLoading: false,
      page:{
        currentPage: 1,
        pageSize: 10,
        total: 1000,
      },
      userTitle: '',
      dialogVisible: false,
      userInfo: {},
      rowIndex: 0,
    }
  },
  methods:{
    init(){
      const data = userData.map(item =>{
        return{
          ...item,
          deptName: this.deptName
        }
      })
      this.tableData = data
    },
    // 查询
    handleSearch(){
      this.tableLoading = true
      // 写查询代码
      setTimeout(() =>{
        this.tableLoading = false
      },1000)
    },
    // 重置
    handleReset(){
      this.tableLoading = true
      // 写查询代码
      setTimeout(() =>{
        this.tableLoading = false
        this.search.username = ''
        this.search.userRole = ''
      },1000)
    },
    // 新增用户
    handleAdd(){
      this.dialogVisible = true
      this.userInfo = {}
      this.userTitle = '新增用户信息'
    },
    // 切换账户状态， 值发生变化时的回调函数
    changeStatus(row){
      // 在点击开关按钮时，按钮的值已经发生变化
      this.$confirm(`确定要${!row.status? '禁用' : '启用'}${row.username}账户吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() =>{
        //确定即保持现状
      })
      .catch(() =>{
        row.status = !row.status
      })
    },
    // 编辑用户信息
    editHandler(row,index){
      this.rowIndex = index
      this.dialogVisible = true
      this.userInfo = row
      this.userTitle = '编辑用户信息'
    },
    // 删除用户信息
    deleteHandler(row,index){
      this.$confirm(`确定要删除该用户信息吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() =>{
        this.rowIndex = index
        this.tableData.splice(index,1)
        this.$message.success('删除成功')
      })
    },
    // 关闭弹窗
    closeDialog(val){
      this.dialogVisible = false
      if(val){
        if(val.type == 'edit'){
          Object.keys(this.tableData[this.rowIndex]).forEach(key =>{
            this.tableData[this.rowIndex][key] = val[key]
          })
          this.$message.success('编辑成功')
        }else if(val.type == 'add'){
          let options = {}
          Object.keys(this.tableData[this.rowIndex]).forEach(key =>{
            options[key] = val[key]
          })
          this.tableData.unshift(options)
          this.$message.success('新增成功')
        }
      }
    },
    // pageSize 发生变化
    handleSizeChange(val){
      this.$set(this.page, "currentPage", 1);
      this.$set(this.page, "pageSize", val);
      this.tableLoading = true
      setTimeout(() =>{
        this.tableLoading = false
      },1000)
    },
    // currentPage 发生变化
    handleCurrentChange(val){
      this.$set(this.page, "currentPage", val);
      this.tableLoading = true
      setTimeout(() =>{
        this.tableLoading = false
      },1000)
    },
  }
}
</script>

<style lang="scss" scoped>
.userTableSide-container{
  flex: 1;
  height: 100%;
}
.search-container{
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ececec;
}
.table-container{
  margin-top: 10px;
  padding: 10px;
}
.add-button-container{
  text-align: right;
}
.table-content{
  margin-top: 10px;
}
.pagination{
  text-align: right;
}
</style>
<style lang="scss">
.search-label-config{
  margin-left: 10px;
  .label-name{
    font-weight: 600;
    color: #4787d2;
  }
  .el-input{
    height: 30px;
    .el-input__inner{
      height: 30px;
      line-height: 30px;
    }
  }
}
.style-userRole{
  margin-left: 10px;
  .el-select__caret{
    line-height: 30px;
  }
}
.search-config-button{
  margin-left: 10px;
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  border: 1px solid $primaryColor;
}
.search-config-button.el-button--primary{
  background-color: $primaryColor;
}
.table-edit-button{
  padding: 5px 5px;
}
.switch-button{
  position: relative;
  .el-switch__core{
    width: 54px !important;
  }
  .el-switch__label{
    position: absolute;
    display: none;
  }
}
.switch-button.check-switch-right{
  .el-switch__label--right{
    display: inline-block !important;
    margin-left: 4px;
    color: #fff;
  }
}
.switch-button.check-switch-left{
  .el-switch__label--left{
    display: inline-block !important;
    margin-left: 20px;
    margin-right: 0;
    color: #fff;
    z-index: 2;
  }
}
</style>
